<template>
  <div class="container">

    <!-- 面包屑导航 -->
   <navbar></navbar>
    <div class="headerbox">
      <div class="header">
        <div class="title_left"></div>
        <span class="top_title"
          >{{pageTitle==1?"分群变更记录":'标签变更记录'}}</span
        >
      </div>

    <div class="content achievement" v-loading="staffTableAchievement.loading">
      <h3 class="card-title">
        <label><span class="title">变更记录</span> </label>
      </h3>
      <common-table :dataList="page.list" :config="staffTableAchievement.config"
                        :sortObj="staffTableAchievement.sortObj"></common-table>
       <div class="page">
        <el-pagination
            background
            @size-change="handleSizeChange"
            @current-change="handleCurrentChange"
            :current-page="page.pageNo"
            :page-sizes="[3, 5, 10, 20, 50]"
            :page-size="page.pageSize"
            layout="total, sizes, prev, pager, next, jumper"
            :total="page.totalNum"
        >
        </el-pagination>
      </div>
    </div>
    </div>

  </div>
</template>

<script>
import navbar from '@/components/navbar.vue'

import CommonTable from './components/CommonTable.vue'
export default {
  components: {
    CommonTable,
    navbar
  },
  data () {
    return {
      pageTitle: '', // 1：分群变更记录，2：标签变更记录
      loading: false,
      rQuery: {},
      page: { list: [], pageNo: 1, pageSize: 10, totalNum: 0, currentPage: 1 },
      staffTableAchievement: { // 近一年员工业绩
        loading: false,
        orgCode: '', // 公司部门
        dateArr: [], // 日期
        sortObj: { prop: 'marketPrice', order: 'descending' }, // 排序
        config: [
          { prop: 'title', label: '操作', align: 'center' },
          { prop: 'version', label: '版本', align: 'center' },
          { prop: 'content', label: '修改内容', width: 130, align: 'center', slot: 'html' },
          { prop: 'createdByLabel', label: '操作人', width: 130, align: 'center' },
          { prop: 'updatedTime', label: '操作时间', width: 130, align: 'center' }
        ],
        list: []
      }
    }
  },

  created () {
    const rQuery = this.$route.query
    this.rQuery = rQuery
    this.pageTitle = rQuery.pageTitle
    // 获取默认数据
    // console.log(rQuery)
    if (rQuery.pageTitle == 1) {
      this.$route.meta.title = '分群变更记录'
    } else {
      this.$route.meta.title = '标签变更记录'
    }
  },
  mounted () {
    this.$nextTick(_ => {
      this.getDataList()
    })
  },
  beforeRouteLeave (to, form, next) {
    document.onkeydown = null
    next()
  },
  activated () {
    // this.brandSelect();
    // this.brandSelectBox();
  },
  watch: {

  },
  methods: {
    getDataList () {
      const rQuery = this.rQuery
      let params = {}
      let baseUrl
      if (this.pageTitle == 1) {
        params = {
          groupId: rQuery.groupId || 0,
          pageNo: this.page.pageNo,
          pageSize: this.page.pageSize
        }
        baseUrl = this.$api.classifyGroupLogPageList
      } else {
        params = {
          tagId: rQuery.labelId || 0,
          pageNo: this.page.pageNo,
          pageSize: this.page.pageSize
        }
        baseUrl = this.$api.tagLogPageList
      }

      baseUrl(params).then((res) => {
        if (res.code == 0) {
          res.data.list.forEach(it => { it.version = `v${it.version}` })
          this.page = res.data
        }
      }).catch((err) => {
        console.log(err)
      })
    },
    // 获取默认数据
    fetchDefaultData () {
      this.getOneYear(true) // 近一年员工业绩
    },

    // // 近一年员工业绩
    // getOneYear (isDefault, dateArr) {
    //   const params = {}
    //   this.$api.oneYear(params).then((res) => {
    //     if (res.code == 0) {
    //       console.log(res, 'res')
    //       const resData = res.data
    //       this.page.list = resData
    //       console.log(this.staffTableAchievement.list, 'this.staffTableAchievement.list')
    //     }
    //   }).catch((err) => {
    //     console.log(err)
    //   })
    // },
    handleCurrentChange (currentChange) {
      this.page.pageNo = currentChange
      this.getDataList()
      console.log(currentChange, 'currentChange')
    },
    handleSizeChange (sizeChange) {
      this.page.pageNo = 1
      this.page.currentPage = 1
      this.page.pageSize = sizeChange
      this.getDataList()
    }
  }
}
</script>

<style scoped lang="scss">

template {
  display: block;
}

h2 {
  position: relative;
  margin-bottom: 21px;
  padding-left: 11px;

  &:before {
    position: absolute;
    top: 4px;
    left: 0;
    display: inline-block;
    content: '';
    width: 4px;
    height: 17px;
    background-color: #2d7edf;
  }
}

.dialog-slot-title {
  line-height: 24px;

  label {
    color: #333333;
    font-weight: bold;
    font-size: 18px;
    margin-right: 10px;
  }

  span {
    font-size: 14px;
    font-weight: 400;
    color: #666666;
  }
}

.sale-chart {
  .sale-chart-right {
    min-height: 557px;

    .el-pagination{
      text-align: center;
    }
  }
}

//近一年业绩
.achievement {
  .card-title {
    margin-top: 20px 0 20px 0;
      .title{
        font-size: 18px;
        font-family: PingFang SC;
        font-weight: 400;
        line-height: 0px;
        color: #333333;
      }
      .num{
        font-size: 14px;
        font-family: PingFang SC;
        font-weight: 400;
        line-height: 0px;
        color: #999999;
        margin-left: 10px;
      }
      .staff-button-list {
      .el-button {
        margin-right: 10px;
      }
    }
  }

  ::v-deep.el-table th > .cell {
    text-align: unset;
  }

}

.el-table__row {
  .el-table__cell {
    .cell {
      padding-left: 12px;
      padding-right: 12px;

      .el-image {
        width: 100px;
        height: 70px;
        overflow: hidden;

        /deep/ img {
          width: 100%;
          object-fit: cover;
        }
      }
    }
  }
}

.page {
  text-align: right;
  width: 100%;
  //background: #f5f5f5;
  padding-right: 20px;
  //position: fixed;
  bottom: 0;
  right: 0;
  z-index: 1000;
  margin-top: 10px;

  span {
    font-size: 14px;
    color: #666;
    display: inline-block;
    margin-left: 10px;
  }

  .el-pagination {
    display: inline-block;
    vertical-align: middle;
  }
}
.headerbox {
  background-color: #fff;
  // display: flex;
  // justify-content: space-between;
  // align-items: center;
  margin-top: 10px;
  padding: 0 20px 0 20px;
  // border-bottom: 1px solid #ededed;
  box-sizing: border-box;
  .header {
    display: flex;
    align-items: center;
    font-size: 18px;
    font-family: PingFang SC;
    font-weight: bold;
    color: #333333;
    border-bottom: 1px solid #ededed;
    margin-bottom: 15px;
    .title_left {
      width: 4px;
      height: 16px;
      background: #4c81eb;
      opacity: 1;
      margin-right: 10px;
    }
    .top_title{
      font-size: 18px;
      font-family: PingFang SC;
      font-weight: bold;
      line-height: 25px;
      color: #333333;
      padding: 20px 0 20px 0;
    }
  }
}
.layout .content-wrapper .content .content{
  padding: 0px;
}
</style>
